<template>
	<view class="page">
		<view class="favorite-list">
			<view v-for="(item, index) in favoriteList" :key="index" class="item">
				<view class="card">
					<view class="product-card">
						<image class="product-image" :src="item.image" mode="aspectFill"></image>
						<view class="product-info">
							<view class="product-title">{{ item.title }}</view>
							<view class="product-price-info">
								<view class="price-box">
									<text class="already-sold">已拼{{ item.soldCount }}件</text>
									<view class="price">
										<text class="symbol">¥</text>
										<text class="amount">{{ item.price }}</text>
									</view>
								</view>
								<view class="action-box">
									<button class="unfavorite-btn" @click="removeFavorite(item.id)">取消收藏</button>
								</view>
							</view>
						</view>
						<view class="group-tag" v-if="item.groupSize">
							<text>{{ item.groupSize }}人团</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态展示 -->
		<view class="empty-state" v-if="favoriteList.length === 0">
			<image class="empty-icon" src="/static/svg/favorite.svg"></image>
			<text class="empty-text">您还没有收藏任何商品</text>
			<button class="go-shopping-btn" @click="goShopping">去逛逛</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 模拟数据，实际应该从API获取
const favoriteList = ref([
	{
		id: 1,
		title: '艾丽苏抹茶蛋糕早点低塘健康',
		image: '/static/svg/matcha-cake.svg',
		price: '136',
		soldCount: '536',
		groupSize: '3'
	},
	{
		id: 2,
		title: '艾丽苏抹茶蛋糕早点低塘健康',
		image: '/static/svg/matcha-cake.svg',
		price: '136',
		soldCount: '536',
		groupSize: '3'
	},
	{
		id: 3,
		title: '艾丽苏抹茶蛋糕早点低塘健康',
		image: '/static/svg/matcha-cake.svg',
		price: '136',
		soldCount: '536',
		groupSize: '3'
	},
	{
		id: 4,
		title: '艾丽苏抹茶蛋糕早点低塘健康',
		image: '/static/svg/matcha-cake.svg',
		price: '136',
		soldCount: '536',
		groupSize: '3'
	},
	{
		id: 5,
		title: '艾丽苏抹茶蛋糕早点低塘健康',
		image: '/static/svg/matcha-cake.svg',
		price: '136',
		soldCount: '536',
		groupSize: '3'
	}
]);

// 移除收藏
const removeFavorite = (id) => {
	favoriteList.value = favoriteList.value.filter(item => item.id !== id);
	uni.showToast({
		title: '已取消收藏',
		icon: 'none'
	});
};

// 跳转到商城
const goShopping = () => {
	uni.switchTab({
		url: '/pages/index/index'
	});
};

onMounted(() => {
	// 实际项目中应该在这里请求收藏列表数据
	// loadFavoriteList();
});
</script>

<style>
.page {
	background-color: #f5f5f5;
	min-height: 100vh;
	padding: 10px;
}

.item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 15px;
}

.card {
	width: 100%;
	background-color: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.product-card {
	position: relative;
	display: flex;
	padding: 15px;
}

.product-image {
	width: 100px;
	height: 100px;
	border-radius: 6px;
	background-color: #f0f0f0;
}

.product-info {
	flex: 1;
	padding-left: 12px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.product-title {
	font-size: 16px;
	color: #333;
	line-height: 1.4;
	margin-bottom: 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
}

.product-price-info {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.price-box {
	display: flex;
	flex-direction: column;
}

.already-sold {
	font-size: 12px;
	color: #999;
	margin-bottom: 5px;
}

.price {
	display: flex;
	align-items: baseline;
	color: #ff5722;
}

.symbol {
	font-size: 14px;
}

.amount {
	font-size: 20px;
	font-weight: bold;
}

.action-box {
	display: flex;
	align-items: center;
}

.unfavorite-btn {
	background-color: #ff5722;
	color: #fff;
	font-size: 12px;
	padding: 4px 12px;
	border-radius: 15px;
	border: none;
	line-height: 1.5;
}

.group-tag {
	position: absolute;
	left: 15px;
	top: 15px;
	background-color: #ff5722;
	color: #fff;
	font-size: 12px;
	padding: 2px 8px;
	border-radius: 12px;
	z-index: 1;
}

/* 空状态样式 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 100px;
}

.empty-icon {
	width: 80px;
	height: 80px;
	margin-bottom: 20px;
}

.empty-text {
	color: #999;
	font-size: 16px;
	margin-bottom: 20px;
}

.go-shopping-btn {
	background-color: #ff5722;
	color: #fff;
	font-size: 14px;
	padding: 8px 30px;
	border-radius: 20px;
	border: none;
}
</style>
